import React, { Component } from 'react'
import { Table, Input, Icon, Button, Popconfirm, Modal } from 'antd';
import { IndexLink, Link } from 'react-router'
import FormPreview from './FormPreview';
import EditableCell from './EditableCell';
import RangeDate from './RangeDate';
import DataJsonEditor from './DataJsonEditor';


const ajaxData = {
  dataSource: [{
    key: '0',
    name: '红军长征答题',
    tableName: '2016hjcz',
    preview: `{"name":{"label":"姓名","type":"input","verify":"string"},
               "address":{"label":"地址","type":"input","verify":"string"},
               "email":{"label":"邮箱","type":"input","verify":"email"},
               "deparment":{
                  "label":"部门",
                  "type":"options",
                  "verify":"string",
                  "residences":[{
                    "value": "新闻",
                    "label": "新闻",
                    "children": [{
                      "value": "新闻A部门",
                      "label": "新闻A部门"
                    }]
                   },
                   {
                    "value": "IT",
                    "label": "IT",
                    "children": [{
                      "value": "IT--A",
                      "label": "IT--A"
                    }]
                   }
                  ]    
                }
         
              }`,
    rangeDate: '123'
  }, {
    key: '1',
    name: '依法治市专题答题',
    tableName: '2016yfzs',
    preview: '{"name":{"label":"姓名","type":"input"}}',
    rangeDate: '123'
  }],
  count: 2,
};


export class TMDFormHome extends Component {
  constructor(props) {
    super(props);
  }
  componentWillMount(){
    // this.this.props.fetch
  }
  render() {
    return (

          <div className="container-form">
            <div className="add-columns">
            </div>
            <div className="contianer-manager">
               <EditableTable ajaxData={ajaxData} /> 
            </div>
          </div>
    )
  }
}



class EditableTable extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        dataSource: this.props.ajaxData.dataSource,
        count: 2,
        jsonModalvisible: false
      };
      // console.log(this.state);
      this.columns = [{
        title: '名称',
        dataIndex: 'name',
        width: '15%',
        render: (text, record, index) => (
          <EditableCell
          value={text}
          onChange={this.onCellChange(index, 'name')}
        />
        ),
      }, {
        title: '数据库表名',
        dataIndex: 'tableName',
        width: '15%',
        render: (text, record, index) => (
          <EditableCell
          value={text}
          onChange={this.onCellChange(index, 'tableName')}
        />
        )
      }, {
        title: '数据库开放时间',
        dataIndex: 'rangeDate',
        render: () => {
          return <RangeDate />
        }
      }, {
        title: '表单预览',
        dataIndex: 'preview',
        render: ((text, record, index) => {
          return <FormPreview fieldData={record.preview}></FormPreview>;

        })
      }, {
        title: '操作',
        dataIndex: 'delete',
        render: (text, record, index) => {
          return (
            this.state.dataSource.length > 1 ?
            (
              <Popconfirm title="Sure to delete?" onConfirm={this.onDelete(index)}>
              <a href="#">删除</a>
            </Popconfirm>
            ) : null
          );
        },
      }, {
        title: '操作',
        dataIndex: 'jsonedit',
        width: '6%',
        render: (text, record, index) => {
          return (
            <p><Button > <Link to={`/tmdform/manager/2`} activeClassName='route--active'>
                            管理题目
                          </Link></Button></p>
          );
        },
      }, {
        title: '操作',
        dataIndex: 'analysis',

        width: '6%',
        render: (text, record, index) => {
          return (
            <p><Button >统计</Button></p>
          );
        },
      }];


    }
    // 表格事件===============
  onCellChange = (index, key) => {
    return (value) => {
      const dataSource = [...this.state.dataSource];
      dataSource[index][key] = value;
      this.setState({ dataSource });
    };
  }
  onDelete = (index) => {
    return () => {
      const dataSource = [...this.state.dataSource];
      dataSource.splice(index, 1);
      this.setState({ dataSource });
    };
  }
  handleAdd = () => {
      const { count, dataSource } = this.state;
      const newData = {
        key: count,
        name: `Edward King ${count}`,
        age: 32,
        address: `London, Park Lane no. ${count}`,
      };
      this.setState({
        dataSource: [...dataSource, newData],
        count: count + 1,
      });
    }
    // ===========================
    // modal操作==================
  setjsonModalVisible(jsonModalvisible, index) {
    this.setState({ jsonModalvisible: jsonModalvisible, jsonModalIndex: index })
  }
  genJsonEditor(data = {}) {
      if (data.hasOwnProperty('preview')) {
        return <div className="jsonModal-body">
                 <div className="jsonModal-body-left">
                    <DataJsonEditor jsonString={data} />
                 </div>
                 <div className="jsonModal-body-right">
                   <FormPreview fieldData={data.preview}></FormPreview>
                 </div>
              </div>
      } else {
        return <p>sdf</p>
      }

    }
    // ===========================
  render() {
    const { dataSource } = this.state;
    const columns = this.columns;
    return (<div>
      <Button className="editable-add-btn" type="ghost" onClick={this.handleAdd}>Add</Button>
      <Table bordered dataSource={dataSource} columns={columns} />
      <Modal
          title="数据库配置json"
          wrapClassName="vertical-center-modal"
          width='1000px'
          wrapClassName='jsontree'
          visible={this.state.jsonModalvisible}
          onOk={() => this.setjsonModalVisible(false)}
          onCancel={() => this.setjsonModalVisible(false)}
        >
        {this.genJsonEditor(dataSource[this.state.jsonModalIndex])}
      </Modal>
    </div>);
  }
}

export default TMDFormHome
